<template>
  <div class="login">
    <div>
      <Pxtile></Pxtile>
      <div class="login-Signin">
        <div class="signin-head"></div>
        <van-field
          label="手机"
          v-model="userLoginInfo.phone"
          placeholder="请输入手机号"
        />
        <van-field
          v-model="userLoginInfo.password"
          :type="displayicon ? ' ' : 'password'"
          label="密码"
          placeholder="请输入密码"
          :right-icon="displayicon ? 'eye-o' : 'closed-eye'"
          @click-right-icon="displayicons"
        ></van-field>
        <div class="forget">忘记密码？</div>
        <van-button
          type="primary"
          size="large"
          color="#05a1f4"
          round
          class="clicklogin"
          @click="login"
          >登录</van-button
        >
        <van-button
          type="default"
          size="large"
          round
          @click="showPopup"
          class="clickregister"
          >注册</van-button
        >
      </div>
      <!-- 注册弹出层 -->
      <div>
        <van-popup
          v-model="show"
          position="bottom"
          :style="{ height: '50%' }"
          closeable
        >
          <h1 class="tel">注册</h1>
          <van-field
            label="手机"
            placeholder="请输入手机号"
            v-model="userRegisterInfo.phone"
          />
          <van-field
            :type="displayicon ? ' ' : 'password'"
            v-model="userRegisterInfo.password"
            label="密码"
            placeholder="请设置密码"
            :right-icon="displayicon ? 'eye-o' : 'closed-eye'"
            @click-right-icon="displayicons"
          ></van-field>
          <van-field
            label="昵称"
            placeholder="请设置昵称"
            v-model="userRegisterInfo.nickName"
          />
          <van-button
            type="default"
            size="large"
            round
            class="clickregister"
            color="#05a1f4"
            @click="register"
            >注册</van-button
          >
        </van-popup>
      </div>
    </div>
  </div>
</template>

<script>
import Pxtile from "../components/Rxtile";
import { utils } from "../assets/js/utils";
import "../assets/less/login.less";
export default {
  name: "Login",
  data() {
    return {
      //是否显示弹出层
      show: false,
      displayicon: false,

      //用户登录信息
      userLoginInfo: {
        phone: "",
        password: "",
      },

      //用户注册信息
      userRegisterInfo: {
        phone: "",
        password: "",
        nickName: "",
      },
    };
  },
  components: {
    Pxtile,
  },
  methods: {
    //显示弹出层
    showPopup() {
      this.show = true;
    },
    //切换输入框的类型
    displayicons() {
      this.displayicon = !this.displayicon;
    },
    // 注册
    register() {
      let o = {
        phone: {
          value: this.userRegisterInfo.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "手机号格式不正确",
        },
        password: {
          value: this.userRegisterInfo.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码支持字母数字_组合且首字符必须为字母",
        },
        nickName: {
          value: this.userRegisterInfo.nickName,
          reg: /^[\u4e00-\u9fa5A-Za-z0-9]{1,10}$/,
          errorMsg: "昵称支持汉字字母数字组合",
        },
      };
      //验证表单
      //表单验证不通过, 拦截注册请求
      if (!utils.validForm(o)) {
        return;
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      //  发送请求数据
      this.axios({
        method: "POST",
        url: this.baseUrl + "/register",
        data: {
          appkey: this.appkey,
          nickName: this.userRegisterInfo.nickName,
          password: this.userRegisterInfo.password,
          phone: this.userRegisterInfo.phone,
        },
      })
        .then((res) => {
          console.log("res=>", res);
          this.$toast.clear();
          if (res.data.code == "100") {
            //关闭弹出层
            this.show = false;
            //清空用户注册信息
            for (let key in this.userRegisterInfo) {
              this.userRegisterInfo[key] = "";
            }
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 2000,
            });
          }
        })
        .catch((err) => {
          console.log("err =>", err);
        });
    },
    //登录
    login() {
      let o = {
        phone: {
          value: this.userLoginInfo.phone,
          reg: /^1[3-9]\d{9}$/,
          errorMsg: "手机号格式不正确",
        },
        password: {
          value: this.userLoginInfo.password,
          reg: /^[A-Za-z]\w{5,15}$/,
          errorMsg: "密码支持字母数字_组合且首字符必须为字母",
        },
      };
      //验证表单
      //表单验证不通过, 拦截注册请求
      if (!utils.validForm(o)) {
        return;
      }
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      // console.log('this.userLoginInfo=>',this.userLoginInfo)
      //  发送请求数据
      this.axios({
        method: "POST",
        url: this.baseUrl + "/login",
        //如果是POST请求，参数需要挂载到data
        data: {
          appkey: this.appkey,
          password: this.userLoginInfo.password,
          phone: this.userLoginInfo.phone,
        },
      }).then((res) => {
        // console.log("res=>", res);
        this.$toast.clear();
        if (res.data.code === 200) {
          //登录成功
          //存储token, 用于下次访问有关于用户信息界面的登录标记
          this.$cookies.set("tokenString", res.data.token, "1d");
          //跳转到其他页面
          this.$router.push({ name: "Home" });
        } else {
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000,
          });
        }
      }).catch(err =>{
        this.$toast.clear();
        console.log('err ==>',err);
      })
    },
  },
};
</script>
